<template>
	<view class="pagesWhite">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">充值</view>
			</view> 
		</view> 
		
		<view class="">
			<view class="operateBox-tabs operateBox-tabs--top">
				<view class="operateBox-formBox">
					<view class="operateBox-formBox-list-header">充值金额</view>
					<view class="operateBox-formBox-list operateBox-formBox-listBg" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: num != '' }">
						<view class="symbol">￥</view>
						<input type="text" placeholder="手动输入充值金额" v-model="num" placeholder-class="inputStyle"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('num')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="priceListBox">
					<view class="priceListBox-list">
						<view class="priceListBox-list__item" v-for="(item,index) in rechargeAmountList" :key="index"
						 :class="{'priceListBox-list__item--active' : active == index}"
						@tap.stop="checkActive(index,item)">
							<view class="price" :class="{'price--active' : active == index}"><text>￥</text>{{ item }}</view>
						</view>
					</view>
				</view>
				
				<view class="buyWaysList">
					<view class="buyWaysList-headerTitle">支付方式</view>
					<view class="buyWaysList-list">
						<view class="buyWaysList-list__item" @tap.stop="checkWaysActive(1)">
							<view class="left">
								<image src="@/static/public/wechat.png" mode=""></image>
								<view class="tips">微信支付</view>
							</view>
							<view class="check">
								<image :src="waysActive == 1 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
							</view>
						</view>
						<view class="buyWaysList-list__item" @tap.stop="checkWaysActive(2)">
							<view class="left">
								<image src="@/static/public/alipay.png" mode=""></image>
								<view class="tips">支付宝</view>
							</view>
							<view class="check">
								<image :src="waysActive == 2 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
							</view>
						</view>
						<view class="buyWaysList-list__item" @tap.stop="checkWaysActive(3)">
							<view class="left">
								<image src="@/static/public/bank.png" mode=""></image>
								<view class="tips">银行卡</view>
							</view>
							<view class="check">
								<image :src="waysActive == 3 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">充值</view>
				
				<view class="tipsRecords" @tap.stop="$tools.jump('./rechargeRecords')">充值记录</view>
				
			</view>
			
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isFocus: null,
				toggle: true,
				num: '100',
				active: 0,
				waysActive: 0,
				rechargeAmountList: [],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getRechargeAmount();
			},
			confirm() {
				if (this.num == '' ) {
					return this.$tools.toast('请输入充值金额');
				}
				if (this.waysActive == 0) {
					return this.$tools.toast('请选择支付方式');
				}
				this.$tools.jump("./recharge_two",this.waysActive,this.num);
				// if(this.toggle){
				// 	this.toggle = false;
				// 	var data = {};
				// 	data['type'] = this.waysActive;
				// 	data['amount'] = this.num;
				// 	console.log("data:",data);
				// 	this.$Ajax('/config/addDownRecharge',data,res => {
				// 			if (res.code == 200) {
				// 				this.$tools.toast("充值提交成功");
				// 				this.waysActive = 0;
				// 				this.num = '';
				// 				this.toggle = true;
				// 			} 
				// 		},err => {
				// 			this.toggle = true;
				// 		}
				// 	)
				// }
			},
			// 
			getRechargeAmount(){
				var data = {};
				console.log("data：",data);
				this.$Ajax('/api/money/getRechargeAmount',data,res => {
						if(res.code == 200){
							this.rechargeAmountList = res.data;
							this.num = this.rechargeAmountList[0];
						}
					}, err => {
					}, 'GET'
				)
			},
			checkWaysActive(index){
				if(this.waysActive != index){
					this.waysActive = index;
				}
			},
			checkActive(index,item){
				if(this.active != index){
					this.active = index;
					this.num = item;
				}
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.operateBox-tabs{
		margin: 26rpx 36rpx;
		.operateBox-formBox-list-header{
			margin-bottom: 26rpx;
		}
		.symbol{
			font-family: PingFang-SC-Bold, PingFang-SC-Bold;
			font-weight: 400;
			font-size: 30rpx;
			color: #241F1F;
			margin-right: 26rpx;
		}
	}
	
	.priceListBox{
		margin-bottom: 42rpx;
		&-list{
			@include flexLeft;
			flex-wrap: wrap;
			&__item{
				background: #F6F6F6;
				border-radius: 14rpx;
				border: 1px solid #F6F6F6;
				padding: 26rpx 0 40rpx;
				width: 186rpx;
				height: 100rpx;
				margin-right: 60rpx;
				margin-bottom: 16rpx;
				&--active{
					background: #FFF0F0;
					border: 1px solid #FF3931;
				}
				.price{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #979797;
					text-align: center;
					text{
						font-size: 28rpx;
					}
					&--active{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: #FF3931;
						text{
							font-size: 24rpx;
						}
					}
				}
				&:nth-child(3n){
					margin-right: 0;
				}
			}
		}
	}
	
	.buyWaysList{
		&-list{
			&__item{
				border-radius: 8rpx;
				// border: 2rpx solid rgba(219,219,219,0.302);
				padding: 14rpx 0rpx;
				margin-bottom: 10rpx;
				.left{
					image{
						width: 56rpx;
						height: 56rpx;
						margin-right: 30rpx;
					}
					.tips{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #131414;
					}
				}
			}
		}
	}
	
	.initBtn{
		margin: 80rpx 0 60rpx;
	}
	
	.tipsRecords{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1989F8;
		text-align: center;
		text-decoration: underline;
	}
	
</style>